<!--
 * @Author: 'hongjilin' '1044580210@qq.com'
 * @Date: 2022-08-30 20:33:08
 * @LastEditors: 'hongjilin' '1044580210@qq.com'
 * @LastEditTime: 2022-09-01 16:08:39
 * @FilePath: \插件开发\src\views\components\nav-tabs.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="nav-tabs">
    <div
      class="nav-tabs-item"
      v-for="(tab, index) in tabs"
      :class="{active: tab.type===activeType}"
      @click="()=>{checkNavTab(tab.type)}"
    >{{tab.tabName}}</div>
  </div>
</template>

<script>
// 不能使用 export default
module.exports = {
  data() {
    return {
      //自定义tabs列表
      tabs: [
        { tabName: '📋 全部', type: 'all' },
        { tabName: '📃 文字', type: 'text' },
        { tabName: '📷 图片', type: 'image' },
        { tabName: '💾 文件', type: 'file' },
        { tabName: '⭐ 定制', type: 'custom' },
      ],
      activeType: 'all'//默认就是全部
    };
  },
  mounted() {
    this.initAddEventListenerKey()
  },
  methods: {
    checkNavTab(type) {
      this.activeType = type
      this.$emit('get-navtab-type', type)
    },

    //添加监听键盘事件，同时将记录当前按下的键位 
    initAddEventListenerKey() {
      document.addEventListener('keydown', (e) => {
        const { key } = e
        switch (key) {
          //当你按下键盘【tab】
          case 'Tab': {
            const list = ['all', 'text', 'image', 'file','custom']
            const index = list.indexOf(this.activeType)
            const target = index === list.length - 1 ? list[0] : list[index + 1]
            this.checkNavTab(target)
          }
        }

      })
    },

  }
};
</script>
